

<%@page import="java.util.List"%>
<%@page import="com.qdu.entity.PublicActivity"%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>管理活动</title>
        <link rel="stylesheet" href="css/bootstrap.min.css"/>
        <link rel="stylesheet" href="css/style.css"/>
        <script src="js/jquery-3.4.1.min.js"></script>
                <style>
		body{background:url(img/01f4235a82c78ea8012192312b0cba.jpg@2o.jpg);background-size:cover; background-attachment:  fixed}
		
		</style>
    </head>
    <body>
        <div>
            <br>
            <br>
            <hr>
            <br>
            <div class="text-center">
                <form action="gpais" class="form-inline" method="get">
                    <input type="text" id="Pno" name="Pno" class="form-control" placeholder="输入活动编号">
                    <button type="submit" id="Pno" class="btn btn-danger">查询</button>
                </form>
            </div>
            <br>
            <hr>
            <br>
            <div class="container">
                    <%
                //从请求对象中根据属性名activityList获取属性值，属性值是一个List<PublicActivity>对象
                List<PublicActivity> activityList = (List<PublicActivity>) request.getAttribute("activityList");

                //如果活动列表为空，则没必要执行后续代码，直接返回即可
                if (null == activityList || activityList.size() == 0) {
                    return;
                }
                //如果列表不为空，则会执行if后面的代码，显示活动列表
            %>

            <table class="table table-striped table-hover">
                <tr>
                    <th>活动编号</th>
                    <th>活动主题</th>
                    <th>活动人数</th>
                    <th>活动地点</th>
                    <th>活动发起人编号</th>
                    <th>操作</th>
                </tr>
                <%
                    //循环遍历列表，列表中一个Activity对象表示一个活动的信息，所以每次遍历打印一个div，显示一个活动的信息
                    for (PublicActivity pa : activityList) {
                %>
                <!--这里为了能够从数据库删除活动的同时，删除当前tr元素，所以给了每个tr一个id，可自定义，这里是用tr编号作为tr元素的id-->
                <tr id="tr<%=pa.getPno()%>">
                    <td><%=pa.getPno()%></td>
                    <td><%=pa.getPtopic()%></td>
                    <td><%=pa.getPnum()%></td>
                    <td><%=pa.getPlocal()%></td>
                    <td><%=pa.getUno()%></td>
                    <td>
                        <!--点击超链接可执行js代码，需要添加前缀“javascript:”-->
                        <!--这里点击“删除”超链接调用自定义的deleteActivity()函数，传入编号删除当前活动-->
                        <!--因为编号是字符串，所以参数两端加引号（外围已经有双引号，所以用了单引号-->
                        <a href="javascript:deleteActivity('<%=pa.getPno()%>');">删除</a>
                    </td>
                </tr>
                <%
                    }
                %>
            </table>

            <script>

                //下面的js代码调用了jQuery的函数，并使用了jQuery的操作元素写法，所以需要先引入jQuery才可
                //这里是自定义的函数deleteActicity()，用于根据学号删除一个活动
                //函数需要传入一个字符串表示的学号，知道要删除哪个活动

                function deleteActivity(Pno) {
                    //调用jQuery的ajax()函数可发送ajax请求
                    //这里使用一个json对象给出该函数需要的参数
                    $.ajax({
                        url: 'dpas', //url指定请求的资源的url，doss表示的是一个Servlet
                        type: 'GET', //type指定提交请求的方式是GET还是POST
                        data: {Pno: Pno}, //data指定要提交的请求参数，可用查询字符串或json对象表示参数，这里用了json对象，说明提交一个请求参数，参数名是Pno，参数值是函数参数rollno的值
                        success: function () { //success指定请求处理成功要执行的代码，用一个匿名函数表示
                            //如果能执行到success的函数，说明数据库删除了，然后将对应的tr元素删除即可
                            $("#tr" + Pno).remove();
                        },
                        error: function (req, status, error) { //error指定如果请求处理失败要执行的代码，用一个匿名函数表示
                            //error对应的函数可接受三个参数
                            //分别表示请求对象，请求状态，错误信息，从第三个参数可获取一些错误信息
                            //主要的还是使用f12的开发者工具调试错误
                            alert("请求处理出错，错误信息：" + error);
                        }
                    });
                }
            </script> 
            <br>
            <br>
            <div class="text-right">
                <form action="adminJsp.jsp">
                    <button class="btn btn-default">返回上一页</button>
                </form>
            </div>
        </div>
    </body>
</html>
